<template>
	<view v-if="showModal" class="modal-container">
		<u-transition :show="showModal">
			<view class="modal-box">
				<view v-if="title" class="modal-header">{{ title }}</view>
				<view class="modal-content" :style="getContentStyle">{{ content }}</view>
				<view class="modal-buttons">
					<view class="btn-item btn-border" v-if="showCancel" @click="handleCancel">
						取消
					</view>
					<view class="btn-item btn-confirm" @click="handleConfirm">确定</view>
				</view>
			</view>
		</u-transition>
	</view>
</template>

<script>
export default {
    props: {
        showModal: {
            type: Boolean,
            default: false,
        },
        showCancel: {
            type: Boolean,
            default: true,
        },
        title: String,
        content: {
            type: String,
            required: true,
        },
    },
    computed: {
        getContentStyle() {
            return {
                paddingTop: this.title ? '24rpx' : '50rpx',
            }
        },
    },
    methods: {
        handleCancel() {
            this.$emit('cancel')
        },
        handleConfirm() {
            this.$emit('confirm')
        },
    },
}
</script>

<style lang="scss" scoped>
.modal-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99999;
	.modal-box {
		width: 529rpx;
		background: #21212a;
		border-radius: 20rpx;
	}

	.modal-header {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		color: #ffffff;
		font-weight: bold;
		margin-bottom: 10rpx;
		text-align: center;
		padding-top: 25px;
	}

	.modal-content {
		padding: 24rpx 50rpx 50rpx;
		font-size: 31rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #ffffff;
		display: flex;
		justify-content: center;
		min-height: 80rpx;
	}

	.modal-buttons {
		display: flex;
		justify-content: flex-end;
		border-top: 1rpx solid #4b4b4b;
	}

	.btn-item {
		width: 50%;
		height: 85rpx;
		line-height: 85rpx;
		text-align: center;
		font-size: 27rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		position: relative;
	}
	.btn-border {
		border-right: 1rpx solid #4b4b4b;
	}
	.btn-confirm {
		color: #21eaaf;
	}
}
</style>
